import React from 'react';
import { Form, Input, Button, Select, DatePicker, Checkbox, Radio, Space, Divider, message } from 'antd';
import { UserOutlined, LockOutlined, PhoneOutlined, MailOutlined } from '@ant-design/icons';
import '../../../styles/tutorial.css';

const { Option } = Select;

/**
 * Form 表单组件教程
 * Form 是 Ant Design 中最复杂的组件之一，我们从基础用法开始逐步深入
 */
const BasicFormTutorial = () => {
  // 创建 Form 实例，用于操作表单
  const [form] = Form.useForm();

  /**
   * 表单提交处理函数
   * @param {Object} values - 表单值
   */
  const onFinish = (values) => {
    console.log('表单提交值：', values);
    message.success('提交成功！');
  };

  return (
    <div className="tutorial-container">
      <h1>Form 基础表单组件</h1>

      {/* 1. 基础表单 */}
      <section className="example-section">
        <h2>1. 基础表单结构</h2>
        <div className="section-description">
          {/* Form 组件的基本概念解释 */}
          <p>Form 组件的核心概念：</p>
          <ul>
            <li>Form: 表单容器，用于收集、验证和提交数据</li>
            <li>Form.Item: 表单项容器，包含标签、校验和错误提示等</li>
            <li>表单控件: Input、Select 等实际的输入组件</li>
          </ul>
        </div>
        <Form
          layout="vertical"
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </section>

      {/* 2. 表单布局 */}
      <section className="example-section">
        <h2>2. 表单布局方式</h2>
        <div className="section-description">
          {/* 表单布局模式说明 */}
          <p>Form 支持三种布局方式：</p>
          <ul>
            <li>horizontal: 水平布局（标签在左侧）</li>
            <li>vertical: 垂直布局（标签在上方）</li>
            <li>inline: 行内布局（适合简单快速的表单）</li>
          </ul>
        </div>
        <Form
          layout="inline"
          onFinish={onFinish}
        >
          <Form.Item
            name="search"
            rules={[{ required: true, message: '请输入搜索内容！' }]}
          >
            <Input placeholder="搜索内容" />
          </Form.Item>

          <Form.Item
            name="type"
          >
            <Select placeholder="选择类型" style={{ width: 120 }}>
              <Option value="1">类型一</Option>
              <Option value="2">类型二</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
      </section>

      {/* 3. 表单验证 */}
      <section className="example-section">
        <h2>3. 表单验证规则</h2>
        <div className="section-description">
          {/* 表单验证规则详细说明 */}
          <p>Form.Item 的 rules 属性支持多种验证规则：</p>
          <ul>
            <li>required: 必填项验证</li>
            <li>pattern: 正则表达式验证</li>
            <li>min/max: 长度验证</li>
            <li>validator: 自定义验证函数</li>
          </ul>
        </div>
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
        >
          <Form.Item
            label="手机号码"
            name="phone"
            rules={[
              { required: true, message: '请输入手机号码！' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码！' }
            ]}
          >
            <Input prefix={<PhoneOutlined />} placeholder="请输入手机号码" />
          </Form.Item>

          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: '请输入邮箱！' },
              { type: 'email', message: '请输入正确的邮箱格式！' }
            ]}
          >
            <Input prefix={<MailOutlined />} placeholder="请输入邮箱" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              验证提交
            </Button>
          </Form.Item>
        </Form>
      </section>

      {/* 4. 动态表单项 */}
      <section className="example-section">
        <h2>4. 动态表单控制</h2>
        <div className="section-description">
          {/* 动态表单特性说明 */}
          <p>Form 支持多种动态表单特性：</p>
          <ul>
            <li>依赖关系: 某些字段依赖其他字段</li>
            <li>动态校验: 根据条件变化的校验规则</li>
            <li>动态显示: 条件渲染表单项</li>
          </ul>
        </div>
        <Form
          layout="vertical"
          onFinish={onFinish}
        >
          <Form.Item
            name="newsletter"
            valuePropName="checked"
          >
            <Checkbox>订阅新闻邮件</Checkbox>
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => 
              prevValues.newsletter !== currentValues.newsletter
            }
          >
            {({ getFieldValue }) => 
              getFieldValue('newsletter') ? (
                <Form.Item
                  name="frequency"
                  label="接收频率"
                  rules={[{ required: true, message: '请选择接收频率！' }]}
                >
                  <Radio.Group>
                    <Radio value="daily">每天</Radio>
                    <Radio value="weekly">每周</Radio>
                    <Radio value="monthly">每月</Radio>
                  </Radio.Group>
                </Form.Item>
              ) : null
            }
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </section>
    </div>
  );
};

export default BasicFormTutorial; 